<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${toplist[topIndex]?.banner_bg})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround" :style="{opacity: headerOpt}" style="background: #FFFFFF;">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#FFFFFF" size="20"></uv-icon>
							</view>
							<view class="font-size-32 font-weight-500">
								全网排行榜
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="z-index: 999;margin-top: -130rpx;">
			<view class="padding-about-24">
				<!-- <scroll-view scroll-x="true" @scrolltolower="scrolltolower" class="scroll-view_H">
					<view class="" style="display: inline-block;">
						
					</view>
				</scroll-view> -->
				<view class="display-flex  align-items space-between">
					<view v-for="item,index in toplist" :key="index" class="margin-right-20"
						@click="topIndex = index,list = [],page = 1,islod = !islod,gettopLists()"
						:class="topIndex == index?'tabs-active':'tabs'">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="view-box  margin-top-20 padding-top-01" style="">
				<uv-sticky :offset-top="s+n">
					<view :style="`background: rgba(255, 255, 255, ${headerOpt});`" class="padding-about-24">
						<uv-tabs :list="tabslist" keyName="title" lineWidth="15" @click="tabsSwiper"
							lineColor="linear-gradient( 270deg, #FE6740 0%, #FE8B1D 100%)" :activeStyle="{
									color: '#262626',
									fontWeight: 'bold',
									transform: 'scale(1.05)',
									fontSize:'28rpx'
						    	}" :inactiveStyle="{
									color: '#7C7C7C',
									transform: 'scale(1)',
									fontSize:'28rpx'
								}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></uv-tabs>
						<view style="height: 5rpx;"></view>
					</view>

				</uv-sticky>

				<view class="padding-about-24">
					<view v-for="item,index in list"
						@click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)" :key="index"
						class="view margin-top-20">
						<view class="display-flex">
							<view class="position-relative">
								<view class=""
									style="width: 220rpx;height: 220rpx;border-radius: 16rpx; overflow: hidden;">
									<image :src="item.thumb_img" style="width: 220rpx;height: 220rpx;" mode=""></image>
									<view v-if="index <=2"
										class="button display-flex space-around color-FFF font-size-22 font-weight-500 align-items position-absolute"
										style="top: 0;padding: 8rpx 16rpx; border-radius: 16rpx 0rpx 16rpx 0rpx;">
										TOP{{index+1}}
									</view>
								</view>
							</view>
							<view class="file-1 display-flex flex-direction-column space-between margin-left-20">
								<view class="font-size-28 font-weight-500 webkit-line-clamp"
									style="-webkit-line-clamp: 2;">
									{{item.title}}
								</view>
								<view class="">
									<!-- <view class="display-flex">
										<view class="font-size-22 margin-top-10 "
											style="background: #F6F6F6;padding: 3rpx 12rpx; color: #E02E22;border-radius: 24rpx;">
											近2小时热销1242件
										</view>
									</view> -->
									<view class="display-flex  space-between align-end">
										<view class="file-1">
											<view class="margin-top-10" style="color: #FF2E38;">
												<text class="font-size-24 font-weight-bold">￥</text>
												<text class=" font-size-36 font-weight-bold">{{item.sale_price}}</text>
											</view>
											<view class="display-flex margin-top-15 align-items">
												<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
													class="label center-size-20  color-FFF">
													{{ item.plan_type == 1?'定向高佣':'预估佣金'}}
												</view>
												<view
													style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
													class="label1 center-size-20">
													¥{{item.price}}
												</view>
											</view>
										</view>
										<!-- <view style="border-radius: 60rpx;"
											class="buttons display-flex align-items center">
											<view class="font-size-24 font-weight-500 color-FFF">
												购买
											</view>
										</view> -->
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="display-flex margin-top-20 align-items">
							<image src="/static/mine/tj.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
							<view class="miaos ">
								<text style="padding: 0 20rpx;">推荐理由：一次用一颗不用烦恼倒多少洗衣液</text>
							</view>
						</view> -->
						<view v-if="item.reason" class="display-flex margin-top-20">
							<image :src="imgaeUrl('/static/home/dian.png')" style="width: 28rpx;height: 26.79rpx;"
								mode="">
							</image>
							<view class="font-size-22 margin-left-20 file-1 webkit-line-clamp"
								style="-webkit-line-clamp: 2; color: #B45F3E;">
								<text class="font-weight-500">推荐理由：</text>
								<text>{{item.reason}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="islod" class="margin-top-20 display-flex center align-items">
					<image :src="imgaeUrl('/static/lod.gif')" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<view class="font-size-26 margin-left-10 color-666">
						正在加载...
					</view>
				</view>
				<view v-else class="padding-about-24">
					<uv-divider text="数据加载完毕"></uv-divider>
				</view>
			</view>
		</view>
		<div class="kong"></div>
		<div class="kong"></div>
		<div class="kong safe-area-inset-bottom"></div>
		<u-tabbar :current="1"></u-tabbar>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const tabslist = ref([])
	const headerOpt = ref(0)
	const toplist = ref([])
	const topIndex = ref(0)
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([]) //热门视频
	const cid = ref(-1)
	const islod = ref(true)
	onLoad(function(option) {
		getGoodsCategory()
		indextop()

	});
	onShow(function() {});
	/** 切换 */
	function tabsSwiper(event) {
		console.log(event);
		cid.value = event.id
		islod.value = !islod.value
		page.value = 1
		list.value = []
		gettopLists()
	}
	/** 获取热门视频*/
	async function gettopLists() {
		let object = {
			page: page.value,
			type: toplist.value[topIndex.value].id,
			cid: cid.value,
		}
		const {
			code,
			data
		} = await api.gettopLists(object)
		if (code == 0) {
			page.value = data.lastId
			list.value = list.value.concat(data.lists)
			islod.value = !islod.value
		}
	}
	async function indextop() {
		const {
			code,
			data
		} = await api.indextop()
		if (code == 0) {
			toplist.value = data
			gettopLists()
		}

	}
	/** 商品分类*/
	async function getGoodsCategory() {
		const {
			code,
			data
		} = await api.getGoodsCategory()
		if (code == 0) {
			tabslist.value = [{
				id: -1,
				title: "全部"
			}, ...data]
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		islod.value = !islod.value
		gettopLists()
	});
	onPageScroll(function(e) {
		// scrollTop.value = 
		headerOpt.value = Math.min(1, e.scrollTop / 200);
	})
</script>

<style scoped lang="scss">
	.tabs,
	.tabs-active {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;


	}

	.tabs-active {
		border: 1rpx solid #FF351B;
		color: #FF351B;
		font-weight: 500;
	}

	.tabs {
		color: #131315;
		border: 1rpx solid #FFFFFF;
	}

	.buttons {
		width: 156rpx;
		height: 64rpx;
		background: #E02E22;
		border-radius: 12rpx;
	}

	.label1 {
		width: 68rpx;
		height: 32rpx;
		background: #FEEBEA;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		color: #E02E22;

	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.view-box {

		background: #F5F5F5;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.backGround {
		width: 750rpx;
		height: 511rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>